<template>
  <div class="main">
    <el-container class="mainContainer">
      <el-aside :width="isFold ? '60px' : '210px'" class="mainAside">
        <nav-menu :isFold="isFold" />
      </el-aside>
      <el-container class="mainMain">
        <el-header class="mainHeader">
          <nav-header @handleFold="handleFold" />
        </el-header>
        <el-main class="mainContent">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import navMenu from '@/components/nav-menu'
import navHeader from '@/components/nav-header'
import { ref } from 'vue'
const isFold = ref(false)

const handleFold = (fold: boolean) => {
  isFold.value = fold
}
</script>

<style scoped lang="less">
.main {
  width: 100%;
  height: 100%;
  // position: fixed;
  // top: 0;
  // left: 0;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  .mainContainer {
    width: 100%;
    height: 100%;
    .mainAside {
      transition: all 0.3s linear;
      height: 100%;
      z-index: 1;
      box-shadow: 7px 0px 20px -10px #5e5e5e;
    }
    .mainMain {
      height: 100%;
      .mainHeader {
        background-color: #ebeaea70;
        z-index: 2;
        box-shadow: -2px 5px 20px -14px #5e5e5e;
      }
      .mainContent {
        color: #333;
        background-color: #f0f2f5;
      }
    }
  }
}
</style>
